<template>
  <div class="w">

    <!-- 标题 -->
    <div class="title-area">
      <span>
        登录日志
      </span>
    </div>

    <!-- 主体内容显示区 -->
    <div class="content-area">

      <!-- 查询表单区 -->
      <div class="form-area">
        <Form
          name="form"
          ref="formRef"
          :labelCol="{span: 7, offset: 0}"
          @finish="formFinish"
          :initialValues="initQueryForm">

          <Row :gutter="16">
            <Col :span="6">
              <FormItem name="ipaddr" label="登录地址" initialValue="">
                <Input placeholder="请输入登录地址" style="width: 70%" />
              </FormItem>
            </Col>
            <Col :span="6">
               <FormItem name="userName" label="用户名称" initialValue="">
                <Input placeholder="请输入用户名称" style="width: 70%" />
              </FormItem>
            </Col>
              <Col :span="6">
              <FormItem name="status" label="状态" initialValue="" style="position: relative;" id="status">
               <Select placeholder="请选择状态" style="width: 70%" allowClear :getPopupContainer="getPopupContainer">
                  <Option v-for="type in dict.type.sys_common_status" :key="type.value" :label="type.label" :value="type.value"></Option>
                </Select>
              </FormItem>
            </Col>
            <Col :span="6">
              <FormItem :wrapperCol="{span: 20, offset: 5}">
                <Button type="primary" @click="formQuery">
                  <Icon name="search" style="margin-top: 3px; margin-right: 5px;" /> 查 询
                </Button>
                <Button style="margin-left: 10px" @click="formReset">
                  <Icon name="rollback-outline" style="margin-top: 3px; margin-right: 5px;" /> 重 置
                </Button>
                <!-- <Button type="link" style="color: #b30000">更多 <Icon name="down" style="vertical-align: middle" /></Button> -->
              </FormItem>
            </Col>
          </Row>  
        </Form>
      </div>

      <!-- 分割线 -->
      <Divider />

      <!-- 按钮区 -->
      <div class="button-area">
     
      </div>
<Skeleton
        :loading="loading"
        :avatar="false"
        active
        :paragraph="{ rows: 6 }"
      >
      <!-- 列表区 -->
      <Table
        style="margin-top: 20px"
        :columns="tableColumns"
        :dataSource="tableData"
        :bordered="false"
        :rowKey="(record) => record.key"
        :scroll="{ y: 470 }"
        @change="handleTableChange"
        :pagination="{
          total: total,
          showQuickJumper: true,
          showSizeChanger: true,
          pageSize: queryForm.pageSize,
          current: queryForm.pageNum,
        }">

        <template #render="render">
          <div v-if="render.dataIndex == 'status'">
           <dict-tag :options="dict.type.sys_common_status" :value="render.record.status"/>
          </div>
          <!-- <div v-else-if="render.dataIndex == 'operation'">
            <Popconfirm :title="`是否确认删除序号为 ${render.record.infoId} 的数据？`" @confirm="removeDataLine(render.record)">
              <a href="#">
                <Icon name="delete-can" style="margin-top: 4px;" /> 删除
              </a>
            </Popconfirm>
          </div> -->
        </template>
         <template #paginationTotal="props">
          <span>总共 {{ props.total }} 条</span>
        </template>
      </Table>
      </Skeleton>
    </div>
  </div>
</template>

<script>
import { Message } from "@uni/vue";
import { list, delLogininfor, cleanLogininfor } from "@/api/monitor/logininfor";
export default {
  name: "Logininfor",
  dicts: ['sys_common_status'],
  data: function () {
    return {
       loading: true,
      formDialogInfo: {
        title: '',
        visible: false,
        id: 0,
        currRow: {}
      },
      queryForm: {},
      initQueryForm: {
        ipaddr: '',
        userName: '',
        status: ''
      },
      tableColumns: [
        // {"title":"访问编号", "dataIndex":"infoId", "key":"infoId", "align":"center", width:80},
        {"title":"用户名称", "dataIndex":"userName", "key":"userName", "align":"center",},
        {"title":"登录地址", "dataIndex":"ipaddr", "key":"ipaddr",  "align":"center", width:130},
        {"title":"登录地点", "dataIndex":"loginLocation", "key":"loginLocation", "align":"center"},
        {"title":"浏览器", "dataIndex":"browser", "key":"browser", "align":"center",width:120},
        {"title":"操作系统", "dataIndex":"os", "key":"os",  "align":"center", width:120},
        {"title":"登录状态", "dataIndex":"status", "key":"status", "align":"center", width:120},
        {"title":"操作信息", "dataIndex":"msg", "key":"msg",  "align":"center", width:100},
        {"title":"登录日期", "dataIndex":"loginTime", "key":"loginTime", "align":"center", width:150},
        // {"title":"操作", "dataIndex":"operation", "key":"operation", "align":"center", "width":80}
      ],
      tableData: [],
      total: 0,
      roleOptions: [],
    }
  },
  created() {
  },
  mounted() {
    this.formFinish();
  },
  methods: {
    getPopupContainer() {
      return document.querySelector("#status")
    },
    formQuery() {
      this.$refs.formRef.submit();
    },
    formReset() {
      this.$refs.formRef.reset();
    },
    async queryList() {
      this.loading = true;
      const rs = await list(this.queryForm);
      if (rs.code !== 200) return Message.error({ text: '获取用户列表信息失败：' + rs.msg });
      this.tableData = rs.rows;
      this.total = rs.total;
      this.loading = false;
    },
    async formFinish(formValues) {
      this.queryForm = {
        pageNum: 1,
        pageSize: 10,
        ipaddr: formValues ? formValues.ipaddr : '',
        userName: formValues ? formValues.userName : '',
        status: formValues ? formValues.status : '',
      };
      this.queryList();
    },
    handleTableChange(p, filters) {
      const { current, pageSize } = p;
      this.queryForm.pageNum = current;
      this.queryForm.pageSize = pageSize;
      this.queryList();
      console.log('filters', p, filters);
    },
    formDialogCancel() {
      this.formDialogInfo.visible = false;
      this.formFinish();
    },
    async removeDataLine(record) {
      const rs = await delOperlog(record.infoId);
      if (rs.code !== 200) return Message.error({ text: '删除用户信息失败：' + rs.msg });
      Message.success({ text: '删除信息完成' });
      this.formQuery();
    },
  }
}
</script>

<style scoped>
  .w {
    /* height: 100%; */
    background-color: #F9FAFB;
  }

  /* 标题 */
  .title-area {
    height: 36px;
    background-color: #E9EBF0;
  }
  .title-area span {
    display: inline-block;
    font-weight: 500;
    line-height: 36px;
    margin-left: 15px;
  }

  /* 主体内容显示区 */
  .content-area {
    /* background-color: lightblue; */
    height: 100%;
    margin-left: 25px;
    margin-right: 25px;
    padding-bottom: 15px;
  }

  /* 查询表单区 */
  .form-area {
    /* background-color: lightcyan; */
    margin-top: 15px;
    margin-left: 50px;
    margin-right: 50px;
  }

  .uni-divider {
    margin: 0;
  }

  /* 按钮区 */
  .button-area {
    margin-top: 15px;
    /* background-color: lightcyan; */
  }
  .button-area svg {
    margin-top: 3px;
    margin-right: 5px;
  }

  /* 列表区 */

  /* 弹框区 */
  ::v-deep .fromModal > .uni-modal-wrap > .uni-modal-wrap-content > .uni-modal-footer {
    padding: 0;
  }
</style>
